<template>
  <div class="content">
    <div class="head">
      <span>流程实例</span>
    </div>
    <Table :height="autoheight" stripe border :loading="loading" :columns="columns1" :data="dataList"></Table>
    <Page :total="totalSize" :current="page" :page-size="pageSize" @on-change="pageNum" @on-page-size-change="pageSizeChange" ></Page>
    <div>
      <Modal v-model="modalDel" title="温馨提示" @on-ok="deleteInfo" @on-cancel="cancel">
        <p>确认要删除吗？</p>
      </Modal>
    </div>
    <Modal v-model="modalStart" title="问题处理" @on-cancel="cancel" cancel-text="取消">
      <FlowTimeline :flowInfo="flowParamsItem"></FlowTimeline>
    </Modal>
  </div>
</template>
<script>
import { autoheight, objTotext } from "../../../static/js/tool.js";
import  FlowTimeline  from "./components/flowTimeline.vue";
export default {
  components:{
    FlowTimeline
  },
  data() {
    return {
      modalStart: false,
      modalDel: false,
      autoheight: 400,
      totalSize: 0,
      pageSize: 20,
      page: 1,
      id: "",
      instanceId: "",
      roleArray: [],
      checkAllGroup: [],
      loading: true,
      columns1: [
        {
          title: "实例ID",
          key: "instanceId",
          align: "center",
          width: 100
        },
        {
          title: "流程定义名称",
          key: "fdName",
          align: "center"
        },
        {
          title: "流程定义ID",
          key: "fdKey",
          align: "center"
        },
        /**
        {
          title: "实例参数",
          key: "sendUserName",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              params.row.instanceParams
            );
          }
        },
         */
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.startFlow(params.row);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.showDelete(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      dataList: [],
      flowParamsItem: {}
    };
  },
  mounted() {
    this.initData();
    autoheight(this, 180);
  },
  methods: {
    initData() {
      this.loading = true;
      this.$http
        .post("/api/flow/actflow/instance/getProcInstance", {
          pageNum: this.page,
          pageSize: this.pageSize
        })
        .then(res => {
          this.dataList = res.retBody;
          this.totalSize = res.retBody.total;
          this.loading = false;
        });
    },

    /**
     * 删除
     */
    deleteInfo() {
      this.$http
        .post("/api/flow/actflow/instance/doDelInstance", {
          instanceId: this.instanceId
        })
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.$Message.success({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          } else {
            this.$Message.warning({
              top: 100,
              duration: 3,
              content: res.retHead.message
            });
          }
          this.initData();
        });
    },
    // 查看
    startFlow(params) {
      this.modalStart = true;
      // this.flowParamsItem = params.instanceParams.risk_audit_task_params;
      // this.flowParamsItem.rwsj = objTotext(this.flowParamsItem.sendDataMap);
    },
    cancel() {},
    deleteCancel() {},
    /**
     * 改变页码
     */
    pageNum(page) {
      this.loading = true;
      this.page = page;
      this.initData();
    },
    /**
     * 改变每页的条数
     */
    pageSizeChange(pageSize) {
      this.loading = true;
      this.pageSize = pageSize;
      this.initData();
    },
    //删除提示框
    showDelete(row) {
      this.modalDel = true;
      this.instanceId = row.instanceId;
    }
  }
};
</script>

